<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>
<h1>哈哈</h1>
<script>
    // 导入 layer模块
    layui.use(["layer"], function () {
        var layer = layui.layer;
        // layer.msg("hello world!!");
       /* layer.msg("确定吗？", {
                btn: ["确定！", "放弃！","a","b","c"],
                yes: function (i) {
                    layer.close(i);
                    layer.msg("yes!!!")
                },
                btn2: function (i) {
                    layer.close(i);
                    layer.msg("no!!!")
                },
                btn3:function(i){
                    layer.close(i);
                    layer.msg("1")
                },
                btn4:function(i){
                    layer.close(i);
                    layer.msg("2")
                },
                btn5:function(i){
                    layer.close(i);
                    layer.msg("3")
                },
            }
        );*/
        //0-6 7种图标  0:warning  1:success  2:error  3:question  4:lock  5:哭脸  6：笑脸
        /*layer.alert("alert弹框蓝",
            {title:'alert',icon:5 },
            function(){//点击“确定”按钮时的回调
                layer.msg("好滴");
            }
        );*/
        // layer.confirm("hello world~",
        //     {shade:false,icon:3,btn:["好滴","不行"]},
        //     function(){layer.msg("好滴！");},
        //     function(){layer.msg("不行！")}
        // );
        // layer.open({
        //     type:1,// 消息框，没有确定按钮
        //     title:["hello","padding-left:5px"], // 标题，及标题样式
        //     content:layui.$("#testmain"), // dom格式
        //     offset:'rb',//可以在右下角显示
        //     shade:false //是否遮罩
        // });
       /* layer.open({
            type:2,// iframe加载，需要一个url
            content:"http://www.taobao.com"
        });*/
    });
</script>
<form class="layui-form layui-form-pane" action="" method="post">
   <!--  layui-form-item 一个输入项
    <div class="layui-form-item">
        <label class="layui-form-label">生日</label>
        &lt;!&ndash; layui-input-block 输入框会占满除文字外的整行 &ndash;&gt;
        <div class="layui-input-block">
            <input readonly id="birth" type="text" name="birth" placeholder="请选择生日日期" autocomplete="off" class="layui-input">
        </div>
    </div>-->
    <!-- layui-form-item 一个输入项-->
    <div class="layui-form-item">
        <label class="layui-form-label">username</label>
        <!-- layui-input-block 输入框会占满除文字外的整行 -->
        <div class="layui-input-block">
            <input id="birth" type="text" name="username" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(["upload","laydate","form"],function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#birth', //指定元素
            format:'yyyy年MM月dd日',
            value:'2012年12月12日' //默认值
            // value:new Date() //默认值
        });
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            ,url: '/demo/data' //上传接口
            ,accept:'file' // file代表所有文件，默认是images代表图片
            ,size:100 // 文件最大100kb
            ,done: function(res){
                //上传完毕回调
                layui.layer.msg("ok");
            }
            ,error: function(){
                //请求异常回调
                layui.layer.msg("error");
            }
        });
    });
</script>
<div id="testmain" style="display:none;padding:10px; height: 173px; width: 275px;">
    hello world!
    <!--<table id="demo" lay-filter="test"></table>-->
</div>

<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use('table', function(){
        var table = layui.table;
        // 为表格填充数据
        table.render({
            elem: '#demo'
            ,height: 312
            ,toolbar:true
            ,url: '/demo/data' //获取数据
            ,page: true //开启分页
            ,cols: [[ //表头
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                ,{field:'score',width:80, title: '评分', sort: true}
                ,{field:"right",width:150,title:"操作",toolbar: '#barDemo'}
            ]]
            ,page:{limit:1//每页显示1条
                ,limits:[1,2,3,10,20,30] //可选每页条数
                ,first: '首页' //首页显示文字，默认显示页号
                ,last: '尾页'
                ,prev: '<em>←</em>' //上一页显示内容，默认显示 > <
                ,next: '<i class="layui-icon layui-icon-next"></i>'
                ,layout:['prev', 'page', 'next','count','limit','skip','refresh'] //自定义分页布局
            }
        });
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                // 同步更新缓存对应的值
                obj.update({
                    username: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });
    });
</script>
<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>